<template>
	<div class="pay-container">
		<!-- 生成微信支付二维码 -->
		<div class="erwei">
			<img :src="qrUrl" alt="" />
		</div>
		<svg class="icon"
			aria-hidden="true">
			<use xlink:href="#icon-wechat_pay"></use>
		</svg>
		<span>使用微信进行支付</span>
		<el-descriptions title="订单详情">
			<el-descriptions-item label="订单号">{{order.order_id}}</el-descriptions-item>
			<el-descriptions-item label="创建时间">{{order.create_time}}</el-descriptions-item>
			<el-descriptions-item label="产品名称">{{order_detail.productName}}</el-descriptions-item>
			<el-descriptions-item label="商品描述">{{order_detail.description}}</el-descriptions-item>
			<el-descriptions-item label="购买数量">{{order_detail.quantity}}</el-descriptions-item>
			<el-descriptions-item label="购买用户">{{order.user_nickname}}</el-descriptions-item>
			<el-descriptions-item label="地址">{{order.address}}</el-descriptions-item>
			<el-descriptions-item label="手机号">{{order.user_phone}}</el-descriptions-item>
			<el-descriptions-item label="总价格">{{order.total_fee}} </el-descriptions-item>
		</el-descriptions>
	</div>
</template>
<script>
    //1.需要通过订单id获取订单详情
    //2.根据订单id请求支付接口
    //3.通过轮询查询支付状态

    import * as payApi from "@/api/pay";
    import qr from "qrcode";
    export default {
        data(){
            return {
                order_detail:{},   //订单详情
                qrUrl:"",   //支付二维码地址
                order:{},
                order_id:""
            }
        },
        async created(){
            //并发请求，请求详情，请求支付
            let order_id = this.$route.query.order_id;
            this.order_id = order_id; //添加到组件实例
            //console.log(order_id);
            if(!order_id){
                this.$router.push("/vipmanager/charge")  //返回充值页
                return
            }
            let res = await Promise.all([
                payApi.getOrder(order_id),
                payApi.startPay(order_id)
            ])
            console.log(res);

            //发起轮询结果
            this.queryOrderStatus()

            //订单详情赋值
            this.order_detail = res[0].data.data.orderDetail[0];
            this.order = res[0].data.data;

            //判断订单是否重复提交
            if(!res[1].data.state){
                //this.$router.push("/vipmanager/charge")   //返回充值页
                return 
            }


            //需要生成二维码
            console.log(res[1]);
            let payUrl = res[1].data.code_url;
            console.log(payUrl);     //undefined


            //下载qrcode插件，生成二维码
            qr.toDataURL(payUrl,(err,imgBase64Url)=>{
                if(err){   //出错的情况
                    this.$messageBox.error(err);
                    return 
                }
                this.qrUrl = imgBase64Url
            })
                
        },
        methods:{
            queryOrderStatus(){
                //使用定时器进行轮询
                this.queryInterval = setInterval(async ()=>{
                    let res = await payApi.queryOrderStatus(this.order_id)
                    console.log(res);
                    if(res.data.status===200){
                        //表示已经支付成功
                        this.$router.push({name:"PaySuccess"})
                    }
                },2000)
            }
        },
        //清空定时器
        beforeDestroy(){
            clearInterval(this.queryInterval);
        }
    }
</script>

<style>

</style>